<template>
  <div>
    <div class="text-muted border rounded bg-light p-3 mb-3">
      反担保合同信息处理说明:
      在统一提交合同审批前都可以修改或者删除合同。在审批流程中可以通过退回后重新编辑合同。
    </div>
    <div v-if="hasContract" v-loading="loading">
      <contract-guard-promise
        :query-id="queryId"
        class="mb-2"
        :related-data="relatedData"
        :is-redo="isRedo"
        :table-data="promise"
      ></contract-guard-promise>
      <contract-guard-mortgage
        :query-id="queryId"
        class="mb-2"
        :related-data="relatedData"
        :is-redo="isRedo"
        :table-data="mortgage"
      ></contract-guard-mortgage>
      <contract-guard-pledge
        :query-id="queryId"
        class="mb-2"
        :related-data="relatedData"
        :is-redo="isRedo"
        :table-data="pledge"
      ></contract-guard-pledge>
      <contract-guard-retention
        :query-id="queryId"
        :related-data="relatedData"
        :is-redo="isRedo"
        :table-data="retention"
      ></contract-guard-retention>
    </div>
    <div class="p-5 bg-light rounded text-center" v-else>
      <i class="fa fa-info-circle text-muted mb-3" style="font-size: 3rem"></i>
      <div class="text-center">还没有委托担保合同</div>
    </div>
  </div>
</template>

<script>
import ContractGuardPromise from '@/credit/views/county/unionProvince/components/ContractGuardPromise'
import ContractGuardMortgage from '@/credit/views/county/unionProvince/components/ContractGuardMortgage'
import ContractGuardRetention from '@/credit/views/county/unionProvince/components/ContractGuardRetention'
import ContractGuardPledge from '@/credit/views/county/unionProvince/components/ContractGuardPledge'
import { mapGetters } from 'vuex'
export default {
  components: {
    ContractGuardPromise,
    ContractGuardMortgage,
    ContractGuardRetention,
    ContractGuardPledge,
  },
  props: {
    queryId: String,
    isRedo: {
      // 是否合同重做，
      type: Boolean,
      default: false,
    },
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['guardDatas', 'entrustContract']),
    contractId() {
      return this.entrustContract.entrust_contract_id
    },
    hasContract() {
      return !!this.contractId
    },
    promise() {
      return this.guardDatas.filter(item => +item.gua_method === 1)
    },
    pledge() {
      return this.guardDatas.filter(item => +item.gua_method === 2)
    },
    mortgage() {
      return this.guardDatas.filter(item => +item.gua_method === 3)
    },
    retention() {
      return this.guardDatas.filter(item => +item.gua_method === 4)
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    getData() {
      this.loading = true
      Promise.all([
        this.$store.dispatch('getGuardsData', this.queryId),
        this.$store.dispatch('getEntrustContract', this.queryId),
      ]).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
